<template>
  <view class="wrap">
    <view class="header">
      <view class="main">
        <image :src="shopInfo.logo" mode="aspectFill" class="logo"></image>
        <view class="info">
          <view class="name">{{shopInfo.shopName}}</view>
          <view class="address">
            <text class="iconfont icon-coordinates"></text>{{shopInfo.address}}
          </view>
          <view class="address">
            <text class="iconfont icon-dianhua"></text>{{shopInfo.bossPhone}}
          </view>
        </view>
        <view class="points">
          <text class="iconfont icon-jifen"></text>{{shopInfo.points}}
        </view>
      </view>
      <view class="description">{{shopInfo.description}}</view>
      <view class="search">
        <text class="iconfont icon-sousuo"></text>
        <input placeholder="搜索商家、商品名称" type="text" confirm-type="search" v-model.trim="searchText" @confirm="getShopGoods"/>
        <text class="iconfont icon-biaoqianhuashucha1" @click="clearSearch"></text>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" v-key @click="onSelectGoods(item)">
        <image :src="item.pic" mode="aspectFill"></image>
		<view class="info" v-if="shopInfo.serviceType == 2">
		  <view class="name ellipsis-2">{{item.name}}</view>
		  <view class="price">¥{{item.price}}/次</view>
		  <view class="scope">服务范围：{{item.shippingFee}}km</view>
		</view>
        <view class="info" v-else>
          <view class="name ellipsis-2">{{item.name}}</view>
          <view class="price">¥{{item.price}}/天</view>
          <view class="scope">服务范围：{{item.shippingFee}}km</view>
        </view>
      </view>
      <view class="loading">{{payload.hasmore ? '上拉加载更多...' : '暂无更多数据'}}</view>
    </view>
    <goods-detail v-if="shopInfo.serviceType == 1 && isShowGoodsDetail" :info="goodsDetail" @close="isShowGoodsDetail = false" ></goods-detail>
    <service-detail v-if="shopInfo.serviceType == 2 && isShowGoodsDetail" :info="goodsDetail" @close="isShowGoodsDetail = false"></service-detail>
    <rent-car :shopId="id" v-if="shopInfo.serviceType == 1"/>
  </view>
</template>
<script>
  import goodsDetail from '../goodsDetail/goodsDetail.vue';
  import serviceDetail from '../serviceDetail/serviceDetail.vue'
  import {Shop, Goods} from '../../apis/index.js'
  import {utils, numeral, broadcast} from '../../utils/index.js'
   import RentCar from '../../components/rent-car.vue'
  export default {
    data () {
      return {
        id: 0,
        isLoading: false,
        isShowGoodsDetail: false,
        shopInfo: {},
        list: [],
        searchText: '',
        goodsDetail: {
          name: '你好',
          price: 1
        },
        payload: {
          current: 1,
          pageSize: 10,
          hasmore: true
        }
      }
    },
    components: {
      'rent-car': RentCar,
      'goods-detail': goodsDetail,
      'service-detail': serviceDetail
    },
    methods: {
      getShopGoods () {
        if (this.isLoading) return
        this.isLoading = true
        utils.wxLoading()
        let userInfo = uni.getStorageSync('userInfo');
        Goods.getGoodsList({
          data: {
            query: {
              id: this.id,
              userId: userInfo.id,
              title: this.searchText,
              status: 1
            },
            pagination: {
              current: this.payload.current,
              pageSize: this.payload.pageSize
            }
          }
        }).then(res => {
          // 获取店铺下商品成功
          console.log(res.data)
          if (res.data.code === 200) {
            console.log(res.data.list)
            res.data.list.map(item => {
              // 处理价格
              item.price = numeral(item.price || 0).divide(100).format('0.00')
              item.deposit = numeral(item.deposit || 0).divide(100).format('0.00')
              // 处理图片
              item.pic = item.picUrls.split(',')[0]
              // 处理运费
              item.shippingFee = numeral(item.shippingFee || 0).divide(100).format('0.00')
            })
            this.payload.hasmore = res.data.list.length === this.payload.pageSize
            this.list = this.payload.current === 1 ? res.data.list : this.list.concat(res.data.list)
          } else {
            console.error('获取店铺下商品失败')
          }
        }).catch(err => console.error(err)).finally(() => {
          this.isLoading = false
          uni.stopPullDownRefresh()
          uni.hideLoading()
        })
      },
      getShopDetail (id) {
        let userInfo = uni.getStorageSync('userInfo')
        Shop.getShopDetail({
          data: {
            query: {id, userId: userInfo.id},
            pagination: {}
          }
        }).then(res => {
          console.log('获取店铺信息成功')
          if (res.data.code) {  
            this.shopInfo = res.data.body
            let carShop = uni.getStorageSync('carShop')
            if (carShop.id !== this.shopInfo.id) {
              // 不是同一家店铺，清空租赁车
              uni.setStorageSync('carShop', this.shopInfo)
              uni.setStorageSync('carGoods', [])
              broadcast.fire('addToCar')
            }
          }
        }).catch(err => {
          utils.wxToast('获取店铺信息出错')
        })
      },
      clearSearch () {
        this.searchText = ''
        this.payload.hasmore = true
        this.payload.current = 1
        this.getShopGoods()
      },
      onSelectGoods (detail) {
        this.goodsDetail = detail
        this.isShowGoodsDetail = true
      },
      createServiceOrder () {
        if (this.isLoading) return
        this.isLoading = true
        util.wxLoading()
        
      }
    },
    components: {
      'goods-detail': goodsDetail
    },

    onLoad (options) {
      this.id = options.id
      this.getShopDetail(options.id)
      this.getShopGoods()
      options.goodsId && getGoodsById.call(this, options.goodsId)
      
    },
    onPullDownRefresh () {
      this.payload.hasmore = true
      this.payload.current = 1
      this.getShopGoods()
    },
    onReachBottom() {
      if (this.payload.hasmore) {
        this.payload.current += 1
        this.getShopGoods()
      }
    }
  }
  /**
   * 根据商品ID获取商品信息详情
   * @param {Number} id
   */
  function getGoodsById (id) {
    return Goods.getGoodsDetail({
      data: {
        query: {
          id
        },
        form: {},
        pagination: {}
      }
    }).then(res => {
      console.log('获取商品详情成功', res.data.list)
      let goods = res.data.list
      // 处理价格/押金

      goods.price = numeral(goods.price).divide(100).format('0.00')
      goods.deposit = numeral(res.data.deposit).divide(100).format('0.00')
      this.goodsDetail = goods
      this.isShowGoodsDetail = true
    }, err => {
      console.error(err)
    })
  }
</script>

<style lang="scss">
  page {
   background: #efefef;
  }
  .wrap {
    .header {
      box-sizing: border-box;
      padding: 20rpx;
      background-color: #FF4A4A;
      .main {
        display: flex;
        .logo {
          width: 136rpx;
          height: 136rpx;
          border-radius: 10rpx;
          background-color: #C0C0C0;
          flex-shrink: 0;
        }
        .info {
          flex: 1;
          box-sizing: border-box;
          padding-left: 20rpx;
          .name {
            font-size: 36rpx;
          }
          .address {
            display: flex;
            align-items: center;
            color: #FFFFFF;
            font-size: 26rpx;
            text {
              padding-right: 10rpx;
              font-size: 13rpx;
            }
          }
        }
        .points {
          flex-shrink: 0;
          color: #FFF;
          font-size: 28rpx;
          display: flex;
          align-items: center;
        }
      }
      .description {
        color: #bbb;
        font-size: 24rpx;
        line-height: 1.5;
        padding: 10rpx;
        box-sizing: border-box;
      }
      .search {
        height: 88rpx;
        display: flex;
        align-items: center;
        border-radius: 10rpx;
        background-color: #FFFFFF;
        box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.24);
        box-sizing: border-box;
        padding: 0 15rpx;
        
        input {
          flex: 1;
          font-size: 28rpx;
        }
        
      }
    }
    .list {
      margin-top: 10rpx;
      .item {
        background-color: #FFFFFF;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        margin-top: 10rpx;
        image {
          width: 168rpx;
          height: 168rpx;
          background-color: #C0C0C0;
          border-radius: 8rpx;
        }
        .info {
          flex: 1;
          box-sizing: 1;
          padding-left: 20rpx;
          font-size: 28rpx;
          padding-top: 10rpx;
          .name {
            height: 80rpx;
          }
          .sum {
            color: #888;
          }
          .price {
            color: #ED1709;
          }
          .scope {
            font-size: 22rpx;
            color: #999999;
          }
        }
      }
    }
  }
  .loading {
    display: flex;
    color: #666666;
    font-size: 28rpx;
    padding: 20rpx;
    justify-content: center;
  }
</style>
